import {
  rem,
  Card,
  Text,
  Badge,
  Group,
  ActionIcon,
  Menu,
  Tooltip,
  MenuTarget,
  MenuItem,
  MenuDropdown,
  MenuDivider,
  Drawer,
} from "@mantine/core";
import {
  IconDots,
  IconInfoOctagon,
  IconLocation,
  IconFileZip,
  IconEdit,
  IconTrash,
} from "@tabler/icons-react";
import Link from "next/link";
import {useDisclosure} from "@mantine/hooks";
import {renderLayer, renderCategory} from "./utils";

interface NodeProps {
  id: string;
  name: string;
  category: string;
  layer: string;
}

const nodes = [
  {id: "YB11001", name: "北京_N1_BB_3", category: "云专网", layer: "骨干网"},
  {id: "YB11001", name: "北京_N1_BB_4", category: "云专网", layer: "骨干网"},
  {id: "CB11001", name: "北京_N2_BB_5", category: "CMNet", layer: "骨干网"},
  {id: "CB11002", name: "北京_N2_BB_6", category: "CMNet", layer: "骨干网"},
  {id: "DB11001", name: "北京CR/BR1", category: "IP专网", layer: "骨干网"},
  {id: "DB11002", name: "北京CR/BR2", category: "IP专网", layer: "骨干网"},
  {id: "CB1101001", name: "北京_N1_望京_MB_1", category: "CMNet", layer: "省网"},
  {id: "CB1101002", name: "北京_N1_菜市口_MB_2", category: "CMNet", layer: "省网"},
  {id: "CB1101003", name: "北京_N1_三台_MB_3", category: "CMNet", layer: "省网"},
  {id: "CB1101004", name: "北京_N1_马连道_MB_4", category: "CMNet", layer: "省网"},
  {id: "CB1101005", name: "北京_N2_三台_MB_5", category: "CMNet", layer: "省网"},
  {id: "CB1101006", name: "北京_N2_亦庄_MB_6", category: "CMNet", layer: "省网"},
  {id: "CB1101007", name: "北京_N2_信息港_MB_7", category: "CMNet", layer: "省网"},
  {id: "CB1101008", name: "北京_N2_大白楼_MB_8", category: "CMNet", layer: "省网"},
];

const nodeInfo = {
  basic: {
    id: "CB11001",
    num: "1111001",
    name: "北京_N2_BB_5",
    assset: "北京集群BB1-BJBJ-INT-CMNET-RT01",
    nm: "CMNET-RT-BJBJ-NE5000EX16A",
  },
};
const nodeInfoLabel = [
  {name: "节点ID", value: nodeInfo.basic.id},
  {name: "节点编号", value: nodeInfo.basic.num},
  {name: "节点名称", value: nodeInfo.basic.name},
  {name: "资管编号", value: nodeInfo.basic.assset},
  {name: "网管编号", value: nodeInfo.basic.nm},
];

export const IpdNode = ({id, name, category, layer}: NodeProps) => {
  const [opened, {open, close}] = useDisclosure(false); // Draw组件专用

  return (
    <>
      <Card withBorder padding="xs">
        <Group justify="space-between">
          <Group gap="xs">
            <Badge variant="light" color={renderCategory(category)}>
              {category}
            </Badge>

            <Badge variant="light" color={renderLayer(layer)}>
              {layer}
            </Badge>
          </Group>
          <Menu position="bottom-end" shadow="sm">
            <MenuTarget>
              <ActionIcon variant="subtle" color="gray">
                <IconDots style={{width: rem(16), height: rem(16)}} stroke={1.5} />
              </ActionIcon>
            </MenuTarget>

            <MenuDropdown>
              <MenuItem
                leftSection={<IconFileZip style={{width: rem(14), height: rem(14)}} stroke={1.5} />}
              >
                下载节点信息
              </MenuItem>
              <MenuItem
                leftSection={<IconEdit style={{width: rem(14), height: rem(14)}} stroke={1.5} />}
              >
                编辑节点信息
              </MenuItem>
              <MenuDivider />

              <MenuItem
                leftSection={<IconTrash style={{width: rem(14), height: rem(14)}} stroke={1.5} />}
                color="red"
              >
                删除此节点
              </MenuItem>
            </MenuDropdown>
          </Menu>
        </Group>

        <Text size="sm" my="md">
          {name}
        </Text>

        <Group justify="space-between">
          <Text size="sm" fs="italic" c="dimmed">
            ID: {id}
          </Text>

          <Group gap="xs">
            <Tooltip
              label="转到设备详情"
              position="bottom"
              transitionProps={{transition: "fade", duration: 300}}
            >
              <ActionIcon
                variant="subtle"
                color="violet"
                size="md"
                component={Link}
                href={{
                  pathname: "/ipdv2/digital_twin/nodes/node",
                  query: {id: id},
                }}
              >
                <IconLocation style={{width: rem(16), height: rem(16)}} stroke={1.5} />
              </ActionIcon>
            </Tooltip>

            <Tooltip
              label="查看节点信息"
              position="bottom"
              transitionProps={{transition: "fade", duration: 300}}
            >
              <ActionIcon variant="subtle" color="violet" size="md" onClick={open}>
                <IconInfoOctagon style={{width: rem(16), height: rem(16)}} stroke={1.5} />
              </ActionIcon>
            </Tooltip>
          </Group>
        </Group>
      </Card>
      <Drawer
        title={`${name} 节点信息`}
        offset={8}
        position="right"
        size="lg"
        radius="md"
        opened={opened}
        onClose={close}
      >
        <Text>这里写节点详细信息</Text>
      </Drawer>
    </>
  );
};
